<script setup lang="ts">
import { reactive } from 'vue'
import type { VantEvent } from 'vant-weapp-typings'
const options = [
  {
    text: '浙江省',
    value: '330000',
    children: [
      {
        text: '杭州市1',
        value: '330100',
        children: [
          { text: '杭州市11', value: '330111' },
          { text: '杭州市22', value: '330122' },
        ],
      },
      { text: '杭州市2', value: '330300' },
    ],
  },
  {
    text: '江苏省',
    value: '320000',
    children: [{ text: '南京市', value: '320200' }],
  },
]
const data = reactive({
  show: false,
  options,
  fieldValue: '',
  cascaderValue: '',
})

const onClick = () => {
  data.show = true
}
const onClose = () => {
  console.log('-onClose')
  data.show = false
}

type selectedOption = { text?: string; name?: string }
type FinishEvent = VantEvent<{
  selectedOptions: selectedOption[]
  value: string
}>

const onFinish = (e: FinishEvent) => {
  console.log('-onFinish', e.detail)

  const { selectedOptions, value } = e.detail
  const fieldValue = selectedOptions.map((option) => option.text || option.name).join('/')

  data.fieldValue = fieldValue
  data.cascaderValue = value
}
const time = 30 * 60 * 60 * 1000
</script>

<template>
  <!-- <view>
    <web-view
      src="http://jdwx.tpri.org.cn/static/index.html?platform=android&serverId=34"
    ></web-view>
  </view> -->
  <view class="content">
    <van-button type="default">默认按钮</van-button>
    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
    <van-count-down :time="time" />
    <van-field
      is-link
      readonly
      :value="data.fieldValue"
      label="地区"
      placeholder="请选择所在地区"
      @tap="onClick"
    />
    <van-popup :show="data.show" round position="bottom">
      <van-cascader
        v-if="data.show"
        :value="data.cascaderValue"
        title="请选择所在地区"
        :options="data.options"
        @close="onClose"
        @finish="onFinish"
      />
    </van-popup>
  </view>
</template>

<style lang="scss"></style>
